<style>
.content {
  margin-top: 40px;
}

.account {
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
  width: 90%;
}

.title {
  margin-right: 30px;
  font-weight: bold;
}

.hr {
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 90%;
  margin: 0 auto;
}

.btn {
  width: 90%;
  margin-top: 40px;
  color: grey;
}

.operate {
  display: flex;
  flex-direction: row;
}

.operate view {
  margin: 0 auto;
  margin-top: 40px;
  font-size: 14px;
  color: #333333;
}
</style>

<template>
  <view class="content">
    <view class="account">
      <view class="title">手机号</view>
      <view class="number">
        <input @input="accountInput" v-model="owner.ownerPhoneNumber"
               placeholder="请输入手机号"
               placeholder-style="color:#999999;"/>
      </view>
    </view>
    <view class="hr"></view>
    <view class="account">
      <view class="title">密 码</view>

      <view class="number">
        <input @input="passwordBlur" v-model="owner.ownerPassword"
               placeholder="请输入密码" password
               placeholder-style="color:#999999;"/>
      </view>
    </view>
    <view class="hr"></view>
    <button class="btn" :disabled="disabled" :type="btnstate" @click="login">登录</button>
    <view class="operate">
      <view>
        <navigator url="/pages/login/register">快速注册</navigator>
      </view>
      <view>找回密码</view>
    </view>
  </view>
</template>

<script>
import {JudgeOwner} from "@/common/utils";
export default {

  methods: {
    accountInput: function (e) {
      var content = e.detail.value;

      this.disabled = !this.usernameRegex.test(content) || !this.passwordRegex.test(this.owner.ownerPassword);
      this.btnstate = this.disabled ? 'default' : 'primary';

      this.showUsernameTip = !this.usernameRegex.test(content);

      // 当手机号格式不正确时显示提示
      if (this.showUsernameTip) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none',
          duration: 2000
        });
      }
    },

    passwordBlur: function (e) {
      var password = e.detail.value;
      // 判断密码
      if (!this.passwordRegex.test(this.owner.ownerPassword)) {
        uni.showToast({
          title: '密码格式不正确',
          icon: 'none',
          duration: 2000
        });
        this.disabled = true;
        this.btnstate = 'default';
        return;
      }
      this.owner.ownerPassword = password;
      this.disabled = !this.usernameRegex.test(this.owner.ownerPhoneNumber);
      this.btnstate = this.disabled ? 'default' : 'primary';
    },

    login() {
      this.$http.post('/uni-app/appLogin', this.owner).then(res => {
        if (res.data.code === 200) {
          uni.setStorageSync('token', res.data.data.token);
          uni.setStorageSync('ownerId', res.data.data.ownerId);
          uni.setStorageSync('tokenTime', new Date())
          uni.setStorageSync('ownerName', res.data.data.ownerNickname);
          uni.setStorageSync('ownerPhoneNumber',res.data.data.ownerPhoneNumber)
          JudgeOwner();
          uni.switchTab({url: '/pages/index/index'})
        } else {
          console.log(res.data.message)
        }
      });
    },
  },

  onShow() {
  },

  data() {
    return {
      owner: {
        ownerPhoneNumber: '',
        ownerPassword: ''
      },
      disabled: true,
      btnstate: "default",
      showUsernameTip: false,
      usernameTip: '手机号格式不正确',
      usernameRegex: /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,20}$/,
      passwordRegex: /^(?:[a-zA-Z]\w*|[0-9]\w*)$/,
    }
  },
}
</script>
